import React, {Component} from 'react';
import {HashRouter, Route} from 'react-router-dom';
import {Layout, Row, Col, Icon, BackTop} from 'antd'



//Bundle
import Bundle from './component/Bundle';
import './App.css';
import Title from './pages/html/Title';
import Home from './pages/html/Home';


import Classification from './pages/html/Classification';
const {  Content, Footer} = Layout;


//常量放在import之后
//主列表 加载过慢 改为主页加载预加载图片

const About = (props) => (
    <Bundle load={() => import('./pages/html/About')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const License = (props) => (
    <Bundle load={() => import('./pages/html/License')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Payer = (props) => (
    <Bundle load={() => import('./auto/Payer')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Blank = (props) => (
    <Bundle load={() => import('./pages/html/Blank')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

//=============
const Container = (props) => (
    <Bundle load={() => import('./pages/html/container/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Kubernete = (props) => (
    <Bundle load={() => import('./pages/html/container/Kubernete')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Docker = (props) => (
    <Bundle load={() => import('./pages/html/container/Docker')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Oceanbase = (props) => (
    <Bundle load={() => import('./pages/html/container/Oceanbase')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);



//=============
const Skills = (props) => (
    <Bundle load={() => import('./pages/html/skills/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Markdown_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/Markdown')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Linux_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/linux/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const JAVA_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const SQL_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/sql/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const DP_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/dp/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Font_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/font/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const PYTHON_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/python/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);


const Git = (props) => (
    <Bundle load={() => import('./pages/html/skills/Git')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const  Vm= (props) => (
    <Bundle load={() => import('./pages/html/skills/Vm')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const MAC = (props) => (
    <Bundle load={() => import('./pages/html/skills/Mac')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

const Maven = (props) => (
    <Bundle load={() => import('./pages/html/skills/Maven')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);


const Knowledge = (props) => (
    <Bundle load={() => import('./pages/html/skills/knowledge/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);





const Linux_Command = (props) => (
    <Bundle load={() => import('./pages/html/skills/linux/Command')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Linux_TOP = (props) => (
    <Bundle load={() => import('./pages/html/skills/linux/Top')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);


//=============SUB_JAVA========

const JAVA1 = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/Java1')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const JAVA2 = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/Java2')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const JAVA3 = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/Java3')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const JAVA4 = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/Java4')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const JAVA5 = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/Java5')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const JAVA6 = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/Java6')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const JDK8Stream = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/JDK8Stream')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

const Jutil = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/JavaUtil')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Jspi = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/SPI')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

const MapLoop = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/MapLoop')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const MapResize = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/MapResize')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const MapOOM = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/MapOOM')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Comm_ERR = (props) => (
    <Bundle load={() => import('./pages/html/skills/java/JERROR')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

//=============PYTHON========
const PNA = (props) => (
    <Bundle load={() => import('./pages/html/skills/python/PNA')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);


//=============SUB_SQL========
const SqlComon = (props) => (
    <Bundle load={() => import('./pages/html/skills/sql/SqlComon')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const DbSet = (props) => (
    <Bundle load={() => import('./pages/html/skills/sql/DbSet')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const SQL_EXSIT = (props) => (
    <Bundle load={() => import('./pages/html/skills/sql/SqlExsit')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
//=============SUB_DP========
const DP_FONT = (props) => (
    <Bundle load={() => import('./pages/html/skills/dp/DpFont')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

const Dp4Failure = (props) => (
    <Bundle load={() => import('./pages/html/skills/dp/Dp4Failure')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const MurphysLaw = (props) => (
    <Bundle load={() => import('./pages/html/skills/dp/MurphysLaw')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const DefinsivePrograming = (props) => (
    <Bundle load={() => import('./pages/html/skills/dp/DefinsivePrograming')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);


//=============SUB_FONT========
const JQuery = (props) => (
    <Bundle load={() => import('./pages/html/skills/font/JQuery')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const React_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/font/Reasct')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const NPM = (props) => (
    <Bundle load={() => import('./pages/html/skills/font/NPM')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);


//=============SUB_KNOWLEDGE========

const IO_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/knowledge/IO')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const XT_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/knowledge/XT')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const XD_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/knowledge/XD')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const MYSQL_ = (props) => (
    <Bundle load={() => import('./pages/html/skills/knowledge/MYSQL')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const MiddleAttack = (props) => (
    <Bundle load={() => import('./pages/html/skills/knowledge/MiddleAttack')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);






//=============
const Settle = (props) => (
    <Bundle load={() => import('./pages/html/settle/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const AcctPay = (props) => (
    <Bundle load={() => import('./pages/html/settle/AcctPay')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const TradeFc = (props) => (
    <Bundle load={() => import('./pages/html/settle/TradeFc')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);



/*const Round_ = (props) => (
    <Bundle load={() => import('./pages/html/li/Round')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Overseas_in = (props) => (
    <Bundle load={() => import('./pages/html/li/Overseas_in')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const Overseas_out = (props) => (
    <Bundle load={() => import('./pages/html/li/Overseas_out')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const RATING = (props) => (
    <Bundle load={() => import('./pages/html/li/Rating')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);*/
//=============
const Vocabulary = (props) => (
    <Bundle load={() => import('./pages/html/vocabulary/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

const FR151 = (props) => (
    <Bundle load={() => import('./pages/html/vocabulary/V151')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const FR152 = (props) => (
    <Bundle load={() => import('./pages/html/vocabulary/V152')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const FR153 = (props) => (
    <Bundle load={() => import('./pages/html/vocabulary/V153')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);



//=============
const SC = (props) => (
    <Bundle load={() => import('./pages/html/note/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

const ScNote = (props) => (
    <Bundle load={() => import('./pages/html/note/Login')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const ScFund = (props) => (
    <Bundle load={() => import('./pages/html/note/Fund')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const ScDownload = (props) => (
    <Bundle load={() => import('./pages/html/note/Download')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const NeedLearn = (props) => (
    <Bundle load={() => import('./pages/html/note/Frame')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const UsedList = (props) => (
    <Bundle load={() => import('./pages/html/note/UsedList')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);


const PIANO = (props) => (
    <Bundle load={() => import('./pages/html/piano/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);
const PIANO_1 = (props) => (
    <Bundle load={() => import('./pages/html/piano/P1')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);



//=============
const Li = (props) => (
    <Bundle load={() => import('./pages/html/li/Index')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

const LiDTS = (props) => (
    <Bundle load={() => import('./pages/html/li/DTS')}>
        {(Chat) => <Chat {...props}/>}
    </Bundle>
);

class App extends Component {


    constructor(props) {
        super(props);

        this.state = {
            date: new Date()
        };
    }


    componentDidMount(){
        function getTime(){
            let data=new Date() ;
            let year=data.getFullYear();
            let mouth=getFull10((data.getMonth()+1));
            let day=getFull10(data.getDate());

            let hour=getFull10(data.getHours());
            let minutes=getFull10(data.getMinutes());
           // let seconds=getFull10(data.getSeconds());

            let time=year+"-"+mouth+"-"+day+" "+hour+":"+minutes;//+":"+seconds;
            document.getElementById('clock').innerHTML="UTC/GMT " +time +" T9";
            setTimeout(getTime,1000*60);
        }

        function getFull10(str){
            var num;
            str>=10?num=str:num="0"+str;
            return num;
        }

        getTime();
    }




    render() {
        return (
        <div>
            <Row>
                    <Col span={18} offset={3}>
                        <div>
                            <p>  </p>
                            <span style={{fontSize: '30px', marginBottom: '20px'}}> XIAN 'S  DESIGN</span>
                            <img src={require('./pages/imgs/high_level.png' )} style={{height:"30%",width:"40%"}}/>
                            <br/>
                            == 2019 make a difference ==
                            <HashRouter>
                                <Route component={Title} path="/"/>
                            </HashRouter>

                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span={18} offset={3}>
                        <Content style={{
                            margin: '14px 16px'
                        }}>
                            <HashRouter>
                                <div>
                                    <Route component={Home} exact strict path="/"/>
                                    <Route component={About} exact strict path="/about"/>
                                    <Route component={Classification} exact strict path="/class"/>
                                    <Route component={Payer} exact strict path="/payer"/>
                                    <Route component={License} exact strict path="/license"/>
                                    <Route component={Blank} exact strict path="/blank"/>


                                    <Route component={Container} exact strict path="/c"/>
                                    <Route component={Kubernete} exact strict path="/c.kbs"/>
                                    <Route component={Docker} exact strict path="/c.docker"/>
                                    <Route component={Oceanbase} exact strict path="/oceanbase"/>


                                    <Route component={Skills} exact strict path="/skills"/>
                                    <Route component={Markdown_} exact strict path="/markdown"/>
                                    <Route component={Git} exact strict path="/git"/>
                                    <Route component={Linux_} exact strict path="/linux"/>
                                    <Route component={JAVA_} exact strict path="/java"/>
                                    <Route component={PYTHON_} exact strict path="/python"/>

                                    <Route component={SQL_} exact strict path="/sql"/>
                                    <Route component={DP_} exact strict path="/dp"/>
                                    <Route component={Font_} exact strict path="/font"/>
                                    <Route component={MAC} exact strict path="/mac"/>
                                    <Route component={Maven} exact strict path="/mvn"/>
                                    <Route component={Vm} exact strict path="/s.vm"/>


                                    <Route component={Linux_Command} exact strict path="/linux/command"/>
                                    <Route component={Linux_TOP} exact strict path="/linux/top"/>


                                    <Route component={JAVA1} exact strict path="/java/1"/>
                                    <Route component={JAVA2} exact strict path="/java/2"/>
                                    <Route component={JAVA3} exact strict path="/java/3"/>
                                    <Route component={JAVA4} exact strict path="/java/4"/>
                                    <Route component={JAVA5} exact strict path="/java/5"/>
                                    <Route component={JAVA6} exact strict path="/java/6"/>
                                    <Route component={JDK8Stream} exact strict path="/java/jdk8.stream"/>
                                    <Route component={Jutil} exact strict path="/java/util"/>
                                    <Route component={Jspi} exact strict path="/java/spi"/>
                                    <Route component={MapLoop} exact strict path="/java/map.loop"/>
                                    <Route component={MapResize} exact strict path="/java/map.resize"/>
                                    <Route component={MapOOM} exact strict path="/java/map.oom"/>
                                    <Route component={Comm_ERR} exact strict path="/java/common.error"/>



                                    <Route component={JQuery} exact strict path="/font/jquery"/>
                                    <Route component={React_} exact strict path="/font/react"/>
                                    <Route component={NPM} exact strict path="/font/npm"/>


                                    <Route component={DbSet} exact strict path="/sql/dbset"/>
                                    <Route component={SQL_EXSIT} exact strict path="/sql/exists"/>
                                    <Route component={SqlComon} exact strict path="/sql/common"/>


                                    <Route component={PNA} exact strict path="/python/a"/>




                                    <Route component={DP_FONT} exact strict path="/dp/font"/>
                                    <Route component={Dp4Failure} exact strict path="/dp/dp4Failure"/>
                                    <Route component={MurphysLaw} exact strict path="/dp/Murphy'sLaw"/>
                                    <Route component={DefinsivePrograming} exact strict path="/dp/DefinsivePrograming"/>





                                    <Route component={Knowledge} exact strict path="/knowledge"/>
                                    <Route component={IO_} exact strict path="/system.io"/>
                                    <Route component={XD_} exact strict path="/system.xd"/>
                                    <Route component={XT_} exact strict path="/system.xt"/>
                                    <Route component={MYSQL_} exact path="/rdbs.mysql"/>
                                     <Route component={MiddleAttack} exact strict path="/tcp.middleAttack"/>


                                    <Route component={Settle} exact strict path="/settle"/>
                                    <Route component={AcctPay} exact strict path="/pay.design"/>
                                    <Route component={TradeFc} exact strict path="/trade.fc"/>


                                   {/* <Route component={Round_} exact strict path="/settle.round"/>
                                    <Route component={RATING} exact strict path="/settle.rating"/>
                                    <Route component={Overseas_in} exact strict path="/settle.oversea.in"/>
                                    <Route component={Overseas_out} exact strict path="/settle.oversea.out"/>*/}

                                    <Route component={Vocabulary} exact strict path="/voc"/>
                                    <Route component={FR151} exact strict path="/voc.v151"/>
                                    <Route component={FR152} exact strict path="/voc.v152"/>
                                    <Route component={FR153} exact strict path="/voc.v153"/>



                                    <Route component={SC} exact strict path="/sc"/>
                                    <Route component={ScNote} exact strict path="/sc.login"/>
                                    <Route component={ScFund} exact strict path="/sc.fund"/>
                                    <Route component={ScDownload} exact strict path="/sc.download"/>
                                    <Route component={NeedLearn} exact strict path="/sc.nl"/>
                                    <Route component={UsedList} exact strict path="/sc.ul"/>



                                    <Route component={Li} exact strict path="/li"/>
                                    <Route component={LiDTS} exact strict path="/li.dts"/>


                                    <Route component={PIANO} exact strict path="/piano"/>
                                    <Route component={PIANO_1} exact strict path="/piano.p1"/>



                                </div>
                            </HashRouter>
                        </Content>
                    </Col>


                </Row>


                <Footer style={{textAlign: 'center'}}>
                    <a className="link2" href='https://github.com/nick8sky'><Icon type="github" style={{marginRight: 8}}/></a>
                    <a className="link2" href='http://blog.csdn.net/llianlianpay/'>csdn</a><br/>

                    <a className="link2" href='#/blank'> © </a>
                    <a className="link2" href='#/license'>2019 nick8sky.github.io all rights reserved xian .<br/></a>
                    <a href="#"><img src="https://img.shields.io/badge/link-996.icu-red.svg" alt="996.icu" /></a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><img src="https://icon.cnzz.com/img/pic.gif" alt="cnzz" /></a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <sw id="clock" ></sw>

                     <br/>
                </Footer>


                <div>
                    <BackTop/>
                </div>

            </div>
        )
    }
}

export default App;
